<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./node_modules/vue/dist/vue.min.js"></script>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .warp{
      width: 200px;
      height: 200px;
      margin: auto;
      background-color: red;
    }
    .new{
      width: 50px;
      height: 20px;
      margin:50px auto;
      text-align: center;
      cursor: pointer;
      background-color: #abdcff;
      border: 1px solid #ccc;
      border-radius: 2px;
    }
    .tip{
      width: 100px;
      line-height: 20px;
      display: none;
    }
    .tip-top{
    position: absolute;
      width: 150px;
      line-height: 40px;
      top: -45px;
      left: -100%;
      right: 0;
      background-color: yellow;
      display: none;
      border-radius: 10px;
    }
    .tip-left{
      height: 40px;
      width: 150px;
      line-height: 40px;
      position: absolute;
      left: -155px;
      top: -10px;
      bottom: 0;
      background-color: yellow;
      display: none;
      border-radius: 10px;
    }
    .tip-right{
      height: 40px;
      width: 150px;
      line-height: 40px;
      position: absolute;
      right: -155px;
      top: -10px;
      bottom: 0;
      background-color: yellow;
      display: none;
      border-radius: 10px;
    }
    .tip-bottom{
      width: 150px;
      line-height: 40px;
      position: absolute;
      bottom: -45px;
      background-color: yellow;
      left: -100%;
      right: 0;
      display: none;
      border-radius: 10px;
    }
  </style>
</head>
<body>
<div id="app">
    <!--<div class="warp" v-loading.fullScreen="loadingIsshow" v-listen:click.stop="fn"></div>-->
  <div class="new">
    <div v-tooltip.top>上</div>
  </div>
  <div class="new"><div v-tooltip.left>左</div></div>
  <div class="new"><div v-tooltip.right>右</div></div>
  <div class="new"><div v-tooltip.bottom>下</div></div>


  <!--指令后面冒号跟参数 点号修饰符-->
</div>
</body>
<script>
  Vue.directive('listen',{
    bind(el,binding) {
      el.addEventListener(binding.arg,binding.value);
      // el.addEventListener(binding.arg,binding.value);
      // el.prototype.stop = el.stopPropagation();
      // el.preventDefault()
    },
    inserted (el,binding) {

    },
    update(el,binding) {
    }
  });
  Vue.directive('tooltip',{
    bind(el,binding) {
      el.style.position = 'relative';
      let tip = document.createElement('span');
      if(binding.modifiers.top){
        tip.className = 'tip-top';
        tip.innerText = 'tip-top,提示信息'
        el.onmouseenter = function() {
          tip.style.display = 'block'
        };
        el.onmouseout = function () {
          tip.style.display = 'none'
        }
      }else if(binding.modifiers.left){
        tip.className = 'tip-left';
        tip.innerText = 'tip-left';
        el.onmouseenter = function() {
          tip.style.display = 'block'
        }
        el.onmouseout = function () {
          tip.style.display = 'none'
        }
      }else if(binding.modifiers.right){
        tip.className = 'tip-right';
        tip.innerText = 'tip-right';
        el.onmouseenter = function() {
          tip.style.display = 'block'
        }
        el.onmouseout = function () {
          tip.style.display = 'none'
        }
      }else if(binding.modifiers.bottom){
        tip.className = 'tip-bottom';
        tip.innerText = 'tip-bottom';
        el.onmouseenter = function() {
          tip.style.display = 'block'
        }
        el.onmouseout = function () {
          tip.style.display = 'none'
        }
      }else {
        tip.className = 'tip'
      }
      el.appendChild(tip);
    },
    inserted (el,binding) {

    },
    update(el,binding) {
    }
  });
  Vue.directive('loading',{
    bind(el,binding) {
    el.style.position = 'relative';
    let loadingMsak = document.createElement('div');
    loadingMsak.className = 'msak';
    let loadingIcon = document.createElement('i');
    loadingIcon.className = 'Icon';
    loadingMsak.appendChild(loadingIcon);
      console.log(binding.modifiers.fullscreen);
      if(binding.modifiers.fullscreen){
      document.body.appendChild(loadingMsak);
    }
    else {
      el.appendChild(loadingMsak);
    }
    el.ele = loadingMsak;
    },
    inserted (el,binding) {

    },
    update(el,binding) {
      if (binding.value){
        el.ele.style.display = 'block'
      } else {
        el.ele.style.display = 'none'
      }
    }
  });
new Vue({
  el: '#app',
  data: {
    loadingIsshow: true,
  },
  methods:{
    fn(){
      this.loadingIsshow = false
    }
  }
})
  // beforeCreate()毫无卵用
  // created()可以获取数据 方法
  // beforeMount()毫无卵用
  // mounted()挂载完成可以获取dom节点
  // beforeDestroy()实例销毁前 通常删除定时器
  // destroyed() 实例销毁后
</script>
</html>
